<template>
	<view class="balance" :style="css.page+'min-height:'+$xyfun.xysys().windowHeight+'px'">
		<view class="head-wrap" :style="css.nbg">
			<view :style="{ background: 'url(/static/images/balance_bg.png) no-repeat right bottom/auto 260rpx' }">
				<view class="money p-lr-50 tc-w flex">
					<!-- 左侧：账户余额 -->
					<view class="balance-info flex-grow">
						<view class="ts-40 tb p-t-50">{{balance || 0.00}}</view>
						<view class="title-wrapper">
							<view class="title ts-26 m-t-15">账户余额（元）</view>
						</view>
					</view>

					<!-- 右侧：切换场馆按钮 -->
					<view class="balance-info flex-grow">
						<view class="switch-wrapper ts-40 tb p-t-50" @tap="$xyfun.to('/pages/store/select')">
							<text class="label">当前门店：</text>
							<text class="switch-text">切换</text>
							<image :src="$xyfun.image('/static/arrow-right.png')" class="arrow-icon" />
						</view>

						<!-- 添加 margin-top 来增加和上面的间距 -->
						<view class="venue-name" @tap="$xyfun.to('/pages/store/select')"
							:style="{ marginTop: '27rpx' }">{{storeInfo.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="menu br-10 p-30">
			<view class="item flex" @tap="$xyfun.to('/pages/user/balance/log')">余额明细 <text
					class="xyicon m-l-auto icon-right"></text> </view>
		</view>

		<view class="bottom-fixed p-b-50 m-b-40" :style="css.pbg">
			<button :style="css.mcbg" class="ts-30 lh-30 p-25 tc-w m-b-30 m-lr-30"
				@tap="$xyfun.to('/pages/user/balance/recharge')">充值</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				css: {},
				balance: "",
				storeInfo: {} // 添加 storeInfo 变量用于存储场馆信息
			}
		},
		computed: {
			...mapState(['common', 'user'])
		},
		async onLoad() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.getStoreInfo(); // 加载当前场馆信息
		},
		onShow() {
			//刷新用户信息
			if (this.user.isLogin) {
				this.getUserInfo();
				this.getStoreMoney();
				this.loadData();
			}
		},
		methods: {
			...mapActions('user', {
				'getUserInfo': 'getInfo'
			}),
			// 获取店铺余额
			getStoreMoney() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: '/User_balance/getBalance',
						data: {
							store_id: store_id,
							user_id: this.user.info.id
						},
						success: res => {
							this.balance = res.balance
						}
					});
				})
			},
			loadData() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/common/index',
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: res => {
							this.storeInfo = res.storeInfo;
						}
					});
				})
			},
			loadData() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/common/index',
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.$xyfun.setNavTitle(res.storeInfo.name)
							this.isLoading = false;
							this.storeInfo = res.storeInfo;
							this.storeInfo.distance = this.$xyfun.algorithm([res.storeInfo.latitude,
								res.storeInfo.longitude
							], [this.lat, this.lng]);
							this.rechargeList = res.rechargeList;
							this.noticeList = res.noticeList;
							this.venueId = res.storeInfo.venue[0].id;

						}
					});
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.head-wrap {
		border-radius: 0 0 30% 30%;
		height: 300rpx;
	}

	.money {
		display: flex;
		justify-content: space-between;
		/* 使余额和切换按钮分布在两边 */
		align-items: center;
		padding: 0 50rpx;
	}

	.balance-info {
		flex-grow: 1;
		/* 使账户余额区域占据剩余空间 */
		display: flex;
		flex-direction: column; /* 垂直排列 */
		justify-content: space-between; /* 确保内容占满可用空间 */
	}

	.ts-40 {
		font-size: 40rpx;
		font-weight: bold;
	}

	.title-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.title {
		font-size: 26rpx;
	}

	.switch-wrapper {
		display: flex;
		align-items: center;
		cursor: pointer;
		font-size: 28rpx;
		color: #333;
	}

	.switch-text {
		margin-left: 10rpx;
		color: #00a0e9;
	}

	.arrow-icon {
		width: 20rpx;
		height: 20rpx;
		margin-left: 5rpx;
	}

	.venue-name {
		font-size: 28rpx;
		color: #333;
	}
</style>
